<template>
    <div class="app-container">
        <div class="filter-container">
            <el-select clearable v-model="listQuery.commId" placeholder="社区" @change="selectComm(listQuery.commId)">
                <el-option v-for="item in commList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>

            <el-select clearable v-model="listQuery.buildId" placeholder="楼宇" @change="selectBuild(listQuery.buildId)">
                <el-option v-for="item in buildList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>

            <el-select clearable v-model="listQuery.unitId" placeholder="单元" @change="selectUnit(listQuery.unitId)">
                <el-option v-for="item in unitList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
            <el-select clearable v-model="listQuery.floorId" placeholder="层" @change="selectFloor(listQuery.floorId)">
                <el-option v-for="item in floorList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>

            <el-select clearable v-model="listQuery.roomId" placeholder="房间">
                <el-option v-for="item in roomList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
            <el-input v-model="listQuery.userName" class="filter-item" clearable placeholder="业主姓名" style="width: 150px" @keyup.enter.native="handleFilter" />
            <el-input v-model="listQuery.mobile" class="filter-item" clearable placeholder="联系电话" style="width: 150px" @keyup.enter.native="handleFilter" />

            <el-button v-waves type="primary" icon="el-icon-plus" @click="addProprietor()">新建业主</el-button>
            <el-button v-waves type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
            <el-upload style="    margin-right: 50px; float: right" :action="importBatch" :headers="headers" :on-success="handleExcelSuccess" :on-error="handleExcelError" :show-file-list="false" :accept="batchAccept">
                <el-button type="primary">批量导入业主</el-button>
                <div slot="tip" class="el-upload__tip"></div>
            </el-upload>
        </div>

        <el-table :key="tableKey" :data="list" fit highlight-current-row style="width: 100%">
            <el-table-column label="业主id" prop="id" width="70px" align="center" />
            <el-table-column label="业主姓名" prop="userName" align="center" />
            <el-table-column label="联系电话" prop="mobile" align="center" />
            <el-table-column label="关联物业" prop="linkBuilds" align="center" />
            <!--这里真他娘的傻逼设计啊-->
            <el-table-column label="关联账户" prop="linkMobiles" align="center" />
            <el-table-column label="操作" align="center" width="500px">
                <template slot-scope="{ row }">
                    <el-button v-waves style="margin-left: 10px" type="primary" @click="perfectInfo(row.id)">完善信息</el-button>
                    <el-button v-waves style="margin-left: 10px" type="primary" @click="bindAccAndEt(row.id, row.equipmentUseStatus)">绑定物业与账户</el-button>
                    <el-button v-waves style="margin-left: 10px" type="primary" @click="accSecords(row.id, row.equipmentUseStatus)">出入记录</el-button>
                    <el-button v-waves style="margin-left: 10px" type="primary" @click="stopAcc(row.id)">{{ !row.status ? "启用账户" : "停用账户" }}</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="getList" />

        <!-- 以下是添加业主的弹窗 -->
        <el-dialog :visible.sync="addProDia" width="60%" title="添加业主信息">
            <!-- {{proprietor}} -->
            <el-form ref="dataForm" label-position="right" :model="proprietor" :rules="rules" label-width="160px">
                <span style="color:red"> **注意：公安机关要求，以下所有信息必须如实填写！**</span>

                <el-row>
                    <el-col :span="8">
                        <el-form-item prop="userName" :label-width="formLabelWidth" label="姓名">
                            <el-input :disabled="isDisabled" v-model="proprietor.userName" placeholder="姓名" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                            <DictSelect v-model="proprietor.sex" placeholder="性别" type="sex" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="生日" :label-width="formLabelWidth" prop="birthday">
                            <el-date-picker v-model="proprietor.birthday" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="人员类型" :label-width="formLabelWidth" prop="proprietorType">
                            <DictSelect v-model="proprietor.proprietorType" placeholder="人员类型" type="proprietor-type" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="联系电话" :label-width="formLabelWidth" prop="mobile">
                            <el-input type="number" oninput="if(value.length>11)value=value.slice(0,11)" :disabled="isDisabled" v-model="proprietor.mobile" placeholder="联系电话"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>
                <el-form-item label="证件类型" :label-width="formLabelWidth" prop="certificateType">
                    <DictSelect :disabled="isDisabled" style="width: 221px" v-model="proprietor.certificateType" placeholder="证件类型" type="card-type" />
                </el-form-item>
                <el-form-item label="证件号码" :label-width="formLabelWidth" prop="certificateNum">
                    <el-input :disabled="isDisabled" style="width: 221px" v-model="proprietor.certificateNum" placeholder="证件号码"></el-input>
                </el-form-item>
                <el-form-item label="上传证件照片:" :label-width="formLabelWidth" prop="idCardPics">
                    <el-upload ref="idCardPicsRef" :action="uploadPath" :file-list="proprietor.idCardPics" :on-change="limitIdcard" :headers="headers" :on-success="handleExcelSuccessIdcard" :on-error="handleExcelErrorIdcard" :before-upload="beforeIUpload" :accept="accept" list-type="picture-card" :auto-upload="true" :limit="5" :class="{disabled:uploadDisabled}">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{ file }">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" :headers="headers" alt />
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-delete" v-if="!isDisabled" @click="handleRemoveIdcard(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="上传头像:" :label-width="formLabelWidth" prop="avatar">
                    <el-upload ref="avatarRef" :action="uploadPath" :file-list="proprietor.avatar" :headers="headers" :on-success="handleExcelSuccessAvatar" :accept="accept" :before-upload="beforeIUpload" list-type="picture-card" :auto-upload="true" :limit="1">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{ file }">
                            <img class="el-upload-list__item-thumbnail" :src="file.url" :headers="headers" alt />
                            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-delete" @click="handleRemoveAvatar(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div style="text-align: center" slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addOrUpdateProSub()">提 交</el-button>
                <el-button @click="addProDia = false">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 以上是添加业主的弹窗 -->

        <!-- 以下是绑定物业与账户的弹窗 -->
        <el-dialog :visible.sync="bindBuildAccDia" width="50%">

            <img style="width:140px ;position:absolute;" :src="proDetail.avatarUrl" />
            <el-form style="margin-left:170px " label-position="left" label-width="110px" :model="proprietor">

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="姓名 :">{{ proDetail.userName  }}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系方式 :">{{ proDetail.mobile }}</el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="人员类型 :">{{getProprietorType(proDetail.proprietorType)}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="籍贯 :">{{ }}</el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="证件类型 :">{{ getCertificateType(proDetail.certificateType)}}</el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="证件号 :">{{proDetail.certificateNum }}</el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template>
                <el-button type="primary" @click="addBuildInfo(proDetail.id)">新增物业信息</el-button>
                <el-table :data="linkBuild" style="width: 100%">
                    <el-table-column prop="buildName" label="关联物业" width="500px">
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="200px">
                        <template slot-scope="{ row }">
                            <el-button v-waves style="margin-left: 10px" type="primary" @click="removeBuild(row.id)">迁出</el-button>

                        </template>
                    </el-table-column>

                </el-table>
            </template>
            <br />
            <template>
                <el-button type="primary" @click="linkAcc(proDetail.id)">关联账号</el-button>
                <el-table :data="linkPros" style="width: 100%">
                    <el-table-column prop="mobile" label="关联账号" width="500px">
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="200px">
                        <template slot-scope="{ row }">
                            <el-button v-waves style="margin-left: 10px" type="primary" @click="removeMainAcc(row.id)">移除</el-button>

                        </template>
                    </el-table-column>

                </el-table>
            </template>
            <!--内层关联账号开始-->
            <el-dialog :show-close="true" :close-on-click-modal="false" width="10%" :visible.sync="linkAccDia" append-to-body>
                <div>
                    <el-button @click="hasAcc()">已有账号</el-button>
                    <el-divider></el-divider>
                    <el-button @click="newAcc()">注册新账号</el-button>
                </div>
            </el-dialog>
            <!--内层关联账号结束-->

            <!--内层已有账号打开输入账号开始-->
            <el-dialog :show-close="true" :close-on-click-modal="false" width="20%" :visible.sync="oldAccDia" append-to-body>
                <el-form label-position="top" label-width="80px">
                    <el-form-item label="请填写关联账号:">
                        <el-input v-model="linkAccObj.likAccOne"></el-input>
                    </el-form-item>
                    <el-form-item style="text-align: center">
                        <el-button type="primary" @click="linkOldAccSub()">提交</el-button>
                        <el-button @click="oldAccDia = false">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>
            <!---内层已有账号打开输入账号结束-->

            <!--内层新增物业信息 开始-->

            <el-dialog :close-on-click-modal="false" width="30%" :visible.sync="addBuildInfoDia" append-to-body>

                <el-form ref="form" :model="buildInfo" label-width="80px">

                    <el-form-item label="社区" prop="commId">
                        <el-select v-model="buildInfo.commId" placeholder="请选择社区" @change="selectCommNoPro(buildInfo.commId)">
                            <el-option v-for="item in commList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="楼宇" prop="buildId">
                        <el-select v-model="buildInfo.buildId" placeholder="请选择楼宇" @change="selectBuildNoPro(buildInfo.buildId)">
                            <el-option v-for="item in buildListNoPro" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单元" prop="unitId">
                        <el-select v-model="buildInfo.unitId" placeholder="请选择单元" @change="selectUnitNoPro(buildInfo.unitId)">
                            <el-option v-for="item in unitListNoPro" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="层" prop="floorId">
                        <el-select v-model="buildInfo.floorId" placeholder="请选择单元" @change="selectFloorNoPro(buildInfo.floorId)">
                            <el-option v-for="item in floorListNoPro" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="房间" prop="roomId">
                        <el-select v-model="buildInfo.roomId" placeholder="请选择房间">
                            <el-option v-for="item in roomListNoPro" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="type">
                        <el-checkbox-group v-model="buildInfo.type">
                            <el-checkbox label="是否为房主" name="type"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                    <el-form-item label="入住时间">
                        <el-col :span="11">
                            <el-form-item prop="statDate">
                                <el-date-picker type="date" placeholder="选择日期" v-model="buildInfo.statDate" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col class="line" :span="2">至</el-col>
                        <el-col :span="11">
                            <el-form-item prop="endDate">
                                <el-date-picker type="date" placeholder="选择日期" v-model="buildInfo.endDate" style="width: 100%;"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="createNow(proDetail.id)">提交</el-button>
                        <el-button @click="addBuildInfoDia = false">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>
            <!--内层新增物业信息 结束-->
        </el-dialog>
        <!-- 以上是绑定物业与账户的弹窗 -->

        <!-- 以下是出入记录 dialog-->
        <el-dialog :visible.sync="recordDia">
            <el-table :key="tableKey" :data="recordList" fit highlight-current-row style="width: 100%">
                <el-table-column label="时间" prop="operatingAt" width="140px" align="center" />
                <el-table-column label="应用设备" prop="equipmentName" align="center" />
                <el-table-column label="操作" prop="operating" align="center" />
            </el-table>
            <pagination v-show="recordTotal > 0" :total="recordTotal" :page.sync="recordListQuery.pageNo" :limit.sync="recordListQuery.pageSize" @pagination="getRecordList" />

        </el-dialog>
        <!--以上是出入记录 dialog--->
    </div>
</template>

<script>
import { upload } from "@/api/common/index.js";
import { communityTree, bindPro } from "@/api/community/building/building.js";
import {
    getList,
    addOrUpdatePro,
    getDetail,
    proLinkBuilds,
    proDeleteBuilds,
    linkOldAcc,
    proLinkPros,
    proRemoveAcc,
    disableOrEnable,
    getRecordList,
    importBatch
} from "@/api/user/user.js";

import { getToken, getTokenName } from "@/utils/auth";
import waves from "@/directive/waves"; // Waves directive
import DictSelect from "@/components/DictSelect";
export default {
    name: "EquipmentTable",
    directives: { waves },
    filters: {},
    components: {
        DictSelect
    },

    data() {
        return {
            //业主详情
            proDetail: {},
            linkBuild: [],
            linkPros: [],
            tableKey: 0,
            list: [],
            total: 0,
            listQuery: {
                pageNo: 1,
                pageSize: 10,
                orderByField: "createdAt",
                orderBy: "desc",

                commId: "",
                buildId: "",
                unitId: "",
                floorId: "",
                roomId: ""
            },

            //以下是关于 出入记录分页的

            recordList: [],
            recordTotal: 0,
            recordListQuery: {
                pageNo: 1,
                pageSize: 10,
                propId: ""
            },

            //以上是关于 出入记录分页的

            isDisabled: false, //是否可以编辑的一些信息
            uploadDisabled: false,
            //关联物业时的相关信息
            buildInfo: {
                type: [],
                isHomeOwner: false, //是否是房主
                roomId: "", //房间id
                statDate: "",
                endDate: "",
                liveTime: ""
            },

            //一个关联账号
            linkAccObj: {
                id: "",
                likAccOne: ""
            },

            //添加新业主
            proprietor: {
                //关联账号
                linkAcc: "",
                mobile: "",
                proprietorType: "",
                userName: "",
                sex: "",
                id: "",
                birthday: "",
                certificateType: "",
                certificateNum: "",
                idCardPics: [], //证件照片
                avatar: [], //头像.
                avatarUrl: "" //头像url
            },
            bindBuildAccDia: false, //绑定设备与账户
            addBuildInfoDia: false, //新增物业信息dialog
            linkAccDia: false, //关联账号dialog
            oldAccDia: false, //已有账号 dialog
            recordDia: false, //  出入记录 dialog

            //关于文件上传的
            headers: {}, //请求图片上传的头部
            accept: ".png ,.jpg", // "jpg与png .只能上传图片先关的
            uploadPath: "",

            //批量导入业主先关的
            importBatch: "",
            batchAccept:
                "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", //限制文件类型

            //搜索框内的相关数据
            commList: [], // 社区集合
            buildList: [], // 楼宇集合
            unitList: [], // 单元集合
            floorList: [], // 楼层集合
            roomList: [], //房间集合

            buildListNoPro: [], // 楼宇集合
            unitListNoPro: [], // 单元集合
            floorListNoPro: [], // 楼层集合
            roomListNoPro: [], //房间集合

            //dialog 内的相关数据,搜索框数据和dia互相不影响
            addProDia: false, //添加业主的dialog
            formLabelWidth: "150px",

            //关于规则的
            rules: {
                userName: [
                    { required: true, message: "姓名不能为空", trigger: "blur" }
                ],
                sex: [
                    { required: true, message: "性别不能为空", trigger: "blur" }
                ],
                birthday: [
                    { required: true, message: "生日不能为空", trigger: "blur" }
                ],
                mobile: [
                    //手机号正则校验
                    {
                        required: true,
                        message: "电话不能为空",
                        trigger: "blur"
                    },
                    {
                        pattern: /^1[3|5|7|8|9]\d{9}$/,
                        message: "请输入正确的号码格式",
                        trigger: "blur"
                    }
                ],

                proprietorType: [
                    {
                        required: true,
                        message: "人员类型不能为空",
                        trigger: "blur"
                    }
                ],
                certificateType: [
                    {
                        required: true,
                        message: "证件类型不能为空",
                        trigger: "blur"
                    }
                ],
                certificateNum: [
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                            if (!value) {
                                return callback(new Error("证件号码不能为空"));
                            } else if (!reg.test(value)) {
                                return callback(new Error("证件格式不正确"));
                            } else {
                                callback();
                            }
                        },
                        trigger: "blur"
                    }
                ],
                idCardPics: [
                    {
                        required: true,
                        message: "证件照片不能为空",
                        trigger: "blur"
                    }
                ],
                avatar: [
                    { required: true, message: "头像不能为空", trigger: "blur" }
                ]
            }
        };
    },

    //监听事件
    watch: {
        "buildInfo.type"(newValue, oldValue) {
            if (newValue.length == 0) {
                this.buildInfo.isHomeOwner = false;
            } else {
                this.buildInfo.isHomeOwner = true;
            }
        }
    },
    created() {
        // 加载信息 获取设备类型
        this.getList();
        this.communityTree();
        //加载上传的地址
        this.uploadPath = upload();
        this.importBatch = importBatch();
        //初始化加载头部信息
        this.headers[getTokenName()] = getToken();
    },
    methods: {
        //导入成功
        handleExcelSuccess(response, file, fileList) {
            //导入成功
            if (response.code !== 0) {
                this.$message.error(response.msg);
            } else {
                var repData = response.data;
                this.getList();
                if (repData.length > 0) {
                    this.$message.error(repData);
                } else {
                    //刷新当前列表
                    this.$message("导入成功");
                }
            }
        },

        //导入失败
        handleExcelError() {
            this.$message("导入失败");
            //导入失败了
        },
        //移除账号
        removeMainAcc(id) {
            proRemoveAcc(id).then(() => {
                //关联成功 关闭当前 dialog, 并且获取关联账号
                this.proLinkPros(this.proDetail.id);
                this.getList();
            });
        },
        //提交关联就账号
        linkOldAccSub() {
            this.linkAccObj.id = this.proDetail.id;
            linkOldAcc(this.linkAccObj).then(() => {
                this.oldAccDia = false;
                //关联成功 关闭当前 dialog, 并且获取关联账号
                this.proLinkPros(this.proDetail.id);
            });
        },
        //已有账号
        hasAcc() {
            this.linkAccDia = false;
            //
            this.oldAccDia = true;
            this.linkAccObj.likAccOne = ""; //关联账号清空
        },
        //注册新账号
        newAcc() {
            this.linkAccDia = false;
            //打开注册新账号的窗口
            this.clearForm();
            this.addProDia = true; //先清除账号 然后打开 dialog
            this.isDisabled = false;
            this.uploadDisabled = false; //此时可以上传
            this.proprietor.linkAcc = this.proDetail.id;
        },
        //关联账号
        linkAcc(id) {
            //alert(id);
            this.linkAccDia = true;
        },
        //迁出
        removeBuild(id) {
            proDeleteBuilds(id).then(() => {
                //重新获取数据
                this.proLinkBuilds(this.proDetail.id);
                this.getList();
            });
        },
        //立即创建 按钮
        createNow(id) {
            //把当前人员关联到某个社区
            this.buildInfo.proId = id;
            bindPro(this.buildInfo).then(() => {
                //关闭当前弹窗
                this.addBuildInfoDia = false;
                //重新获取数据 .
                this.proLinkBuilds(id);
            });

            //alert(id);
        },
        //添加物业信息
        addBuildInfo(id) {
            this.addBuildInfoDia = true;
            this.clearAddBuildForm(); //清空表单
        },
        //绑定设备与账户
        bindAccAndEt(id) {
            this.bindBuildAccDia = true;

            getDetail(id).then(response => {
                this.proDetail = response;
                var avatarStr = response.avatarFileCode;
                if (avatarStr != null && avatarStr.length > 0) {
                    this.proDetail.avatarUrl = JSON.parse(avatarStr)[0].url;
                }
            });
            this.proLinkBuilds(id);
            this.proLinkPros(id);
        },

        //添加或者修改提交业主
        addOrUpdateProSub() {
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    addOrUpdatePro(this.proprietor).then(() => {
                        //获取新的消息
                        this.getList();
                        this.addProDia = false;
                        // 如果是关联新业主的重新获取业主 ;;
                        console.log(this.proprietor.linkAcc);
                        if (
                            this.proprietor.linkAcc != null &&
                            this.proprietor.linkAcc != ""
                        ) {
                            //获取最新的
                            this.proLinkPros(this.proDetail.id);
                        }
                    });
                }
            });
        },
        // 添加业主按钮
        addProprietor() {
            this.addProDia = true;
            this.clearForm();
            this.isDisabled = false;
            this.uploadDisabled = false; //此时可以上传
        },

        //完善信息
        perfectInfo(id) {
            this.addProDia = true;
            this.clearForm();
            this.isDisabled = true;
            this.uploadDisabled = true; //不能上传不能修改
            //根据id 获取信息,并且赋值
            getDetail(id).then(response => {
                this.proprietor = response;
                //response
                // alert(response.avatarFileCode.length);
                // alert(response.idCardPicsFileCode.length);
                //头像赋值
                var avatarStr = response.avatarFileCode;
                if (avatarStr != null && avatarStr.length > 0) {
                    this.proprietor.avatar = JSON.parse(avatarStr);
                }
                var idCardStr = response.idCardPicsFileCode;
                if (idCardStr != null && idCardStr.length > 0) {
                    this.proprietor.idCardPics = JSON.parse(idCardStr);
                }
            });
        },

        //出入记录
        accSecords(id) {
            this.recordDia = true;
            this.getRecordList(id);
            this.recordListQuery.propId = id;
        },

        //停用账户
        stopAcc(id) {
            disableOrEnable(id).then(() => {
                this.getList();
            });
        },

        //头像上传成功的回调
        handleExcelSuccessAvatar(response) {
            if (response.code !== 0) {
                this.$message.error(response.msg);
            } else {
                var vote = {};
                vote.url = response.data.f_url;
                vote.fileId = response.data.f_id;
                this.proprietor.avatar.push(vote);
            }
        },
        //移除头像
        handleRemoveAvatar(file) {
            let uploadFiles = this.$refs.avatarRef.uploadFiles;
            for (var i = 0; i < uploadFiles.length; i++) {
                if (uploadFiles[i]["url"] == file.url) {
                    uploadFiles.splice(i, 1);
                    var thisArry = this.proprietor.avatar;
                    var fileId = file.fileId;
                    //移除vue 里面将上传的 后端的 fileId数组
                    thisArry.splice(
                        thisArry.findIndex(e => e === fileId),
                        1
                    );
                }
            }
        },

        //移除身份证文件
        handleRemoveIdcard(file) {
            let uploadFiles = this.$refs.idCardPicsRef.uploadFiles;
            for (var i = 0; i < uploadFiles.length; i++) {
                if (uploadFiles[i]["url"] == file.url) {
                    uploadFiles.splice(i, 1);
                    var thisArry = this.proprietor.idCardPics;
                    var fileId = file.fileId;
                    //移除vue 里面将上传的 后端的 fileId数组
                    thisArry.splice(
                        thisArry.findIndex(e => e === fileId),
                        1
                    );
                }
            }
        },

        //身份证文件上传成功回调
        handleExcelSuccessIdcard(response) {
            if (response.code !== 0) {
                this.$message.error(response.msg);
            } else {
                //数组添加数据   this.$set(this.serviceProvider, "associatedCommunityArr", arr); 数组添加数据即可
                var vote = {};
                vote.url = response.data.f_url;
                vote.fileId = response.data.f_id;
                this.proprietor.idCardPics.push(vote);
            }
        },

        //身份证文件上传失败回调
        handleExcelErrorIdcard(err, file, fileList) {
            alert("上传失败");
        },

        //身份证文件上传之前的相关限制
        beforeIUpload(file) {
            const isJPG =
                file.type === "image/jpeg" || file.type === "image/png";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传文件只能是 JPG 或 PNG格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传文件大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
        limitIdcard(file, fileList) {
            if (fileList.length >= 5) {
                console.log("进来了");
                this.uploadDisabled = true;
            }
        },

        diaLinkEquitBuildSub() {
            this.$refs["dataForm"].validate(valid => {
                if (valid) {
                    linkEquitBuild(this.equipment).then(() => {
                        // 关闭 dialog 框
                        this.dialogAddEquipment = false;
                        //获取新的消息
                        this.getList();
                    });
                }
            });
        },

        /**
         *
         */

        // 选择社区
        selectComm(id) {
            this.listQuery.buildId = "";
            this.listQuery.unitId = "";
            this.listQuery.floorId = "";
            this.listQuery.roomId = "";
            this.unitList = [];
            this.floorList = [];
            this.roomList = [];
            if (id == null || id == "") {
                this.buildList = [];

                return;
            }
            //根据父id 把子级选出来   ,,
            //this.buildList = [];
            var tempArr = this.commList.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.buildList = tempArr[0].children;
            }
        },

        //选择楼宇
        selectBuild(id) {
            this.listQuery.unitId = "";
            this.listQuery.floorId = "";
            this.listQuery.roomId = "";
            this.floorList = [];
            this.roomList = [];
            if (id == null || id == "") {
                this.unitList = [];
                return;
            }
            //根据父id 把子级选出来   ,,
            //先清空下级的数据
            var tempArr = this.buildList.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.unitList = tempArr[0].children;
            }
        },

        //选择单元
        selectUnit(id) {
            this.listQuery.floorId = "";
            this.listQuery.roomId = "";
            this.roomList = [];
            if (id == null || id == "") {
                this.floorList = [];
                return;
            }
            //根据父id 把子级选出来   ,,

            //先清空下级的数据

            var tempArr = this.unitList.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.floorList = tempArr[0].children;
            }
        },

        //选择楼层
        selectFloor(id) {
            //先清空下级的数据
            this.listQuery.roomId = "";

            if (id == null || id == "") {
                this.roomList = [];
                return;
            }
            //根据父id 把子级选出来
            var tempArr = this.floorList.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.roomList = tempArr[0].children;
            }
        },

        // 选择社区 没有被使用的社区
        selectCommNoPro(id) {
            this.buildInfo.buildId = "";
            this.buildInfo.unitId = "";
            this.buildInfo.floorId = "";
            this.buildInfo.roomId = "";
            this.unitListNoPro = [];
            this.floorListNoPro = [];
            this.roomListNoPro = [];
            if (id == null || id == "") {
                this.buildListNoPro = [];

                return;
            }
            //根据父id 把子级选出来   ,,
            //this.buildList = [];
            var tempArr = this.commList.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.buildListNoPro = tempArr[0].children;
            }
        },

        //选择楼宇
        selectBuildNoPro(id) {
            this.buildInfo.unitId = "";
            this.buildInfo.floorId = "";
            this.buildInfo.roomId = "";
            this.floorListNoPro = [];
            this.roomListNoPro = [];
            if (id == null || id == "") {
                this.unitListNoPro = [];
                return;
            }
            //根据父id 把子级选出来   ,,
            //先清空下级的数据
            var tempArr = this.buildListNoPro.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.unitListNoPro = tempArr[0].children;
            }
        },

        //选择单元
        selectUnitNoPro(id) {
            this.buildInfo.floorId = "";
            this.buildInfo.roomId = "";
            this.roomListNoPro = [];
            if (id == null || id == "") {
                this.floorListNoPro = [];
                return;
            }
            //根据父id 把子级选出来   ,,

            //先清空下级的数据

            var tempArr = this.unitListNoPro.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.floorListNoPro = tempArr[0].children;
            }
        },

        //选择楼层
        selectFloorNoPro(id) {
            //先清空下级的数据
            this.buildInfo.roomId = "";

            if (id == null || id == "") {
                this.roomListNoPro = [];
                return;
            }
            //根据父id 把子级选出来   ,,
            var tempArr = this.floorListNoPro.filter(function(obj) {
                return obj.id == id;
            });
            if (tempArr.length > 0) {
                this.roomListNoPro = tempArr[0].children;
            }
        },
        //加载首页数据
        getList() {
            getList(this.listQuery).then(response => {
                this.list = response.list;
                this.total = response.totalCount;
            });
        },

        //出入记录分页数据
        getRecordList(id) {
            getRecordList(this.recordListQuery).then(response => {
                this.recordList = response.list;
                this.recordTotal = response.totalCount;
            });
        },

        //业主关联的物业集合
        proLinkBuilds(id) {
            proLinkBuilds(id).then(response => {
                this.linkBuild = response;
            });
        },

        //业主关联的账号集合
        proLinkPros(id) {
            proLinkPros(id).then(response => {
                this.linkPros = response;
            });
        },

        // 获取自己的社区列表
        communityTree() {
            communityTree().then(response => {
                this.commList = response;
            });
        },

        getTypesUsed() {
            getTypesUsed().then(response => {
                this.diaTypeList = response;
            });
        },

        //清空表单  数据和校验规则 都得清除
        clearForm() {
            this.proprietor.linkAcc = "";
            //清空规则
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
            });
        },

        //清空表单  数据和校验规则 都得清除
        clearAddBuildForm() {
            //清空规则
            this.buildListNoPro = [];
            this.unitListNoPro = [];
            this.floorListNoPro = [];
            this.roomListNoPro = [];
            this.$nextTick(() => {
                this.$refs["form"].resetFields();
            });
        },

        //人员类型
        getProprietorType(type) {
            //1物业 2住户 3租户
            if (type == 1) {
                return "物业";
            } else if (type == 2) {
                return "住户";
            } else if (type == 3) {
                return "租户";
            }
        },

        //证件类型
        getCertificateType(type) {
            //1身份证 2护照
            if (type == 1) {
                return "身份证";
            } else if (type == 2) {
                return "护照";
            }
        },
        handleFilter() {
            this.listQuery.pageNo = 1;
            this.getList();
        }
    }
};
</script>
<style >
.disabled .el-upload--picture-card {
    display: none !important;
}
</style>
